<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold">{{ $t("page.navbar.Transactions") }}</h1>
        <van-icon
          class="cursor-pointer close-icon"
          @click="backPage"
          name="cross"
        />
      </div>
      <div class="responsive-layout" ref="scrollTable">
        <div class="sidebar font-semibold p-2 mb-6 md:mb-0 rounded text-sm">
          <div v-for="(item, index) in tabData">
            <button
              class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
              :class="activeTab == item.key ? 'active-tab' : ''"
              @click="clickTab(item.key)"
            >
              {{ $t(item.title) }}
            </button>
          </div>
        </div>
        <div class="bg-[#0f212e] p-4 rounded-md overflow-x-auto">
          <!-- 充值记录 -->
          <div v-if="activeTab === 'tab1'" class="relative content">
            <table class="w-full h-auto" style="table-layout: fixed">
              <thead class="table-header text-[#90bacc]">
                <tr>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.amount") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.coincount") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.rechargemethod") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.paymentmethod") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.paymentstatus") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.paymenttime") }}
                  </th>
                </tr>
              </thead>
              <tbody v-if="tableData1.length">
                <tr
                  class="table-row bg-[#213743]"
                  v-for="(item, i) in tableData1"
                  :key="i"
                >
                  <td class="p-4 py-2 text-center">{{ item.fiat_amount }}</td>
                  <td class="p-4 py-2 text-center">{{ item.amount }}</td>
                  <td class="p-4 py-2 text-center">
                    {{ t("layer.code." + item.type) }}
                  </td>
                  <td class="p-4 py-2 text-center">{{ item.channel_name }}</td>
                  <td
                    class="p-4 py-2 text-center overflow-ellipsis whitespace-nowrap"
                  >
                    {{ item.pay_text }}
                  </td>
                  <td
                    class="p-4 py-2 text-center overflow-ellipsis whitespace-nowrap"
                  >
                    {{ item.created_at }}
                  </td>
                </tr>
              </tbody>
              <div v-else class="m-auto my-4 w-[65vw]">
                <el-empty
                  class=""
                  :image-size="200"
                  :description="$t('layer.activity.noData')"
                />
              </div>
            </table>
          </div>
          <!-- 提现记录 -->
          <div v-if="activeTab === 'tab2'" class="relative content">
            <table class="w-full h-auto" style="table-layout: fixed">
              <thead class="table-header text-[#90bacc]">
                <tr>
                  <!-- <th class="p-4 py-2 text-center w-[220px]">
                    {{ $t("page.table.ID2") }}
                  </th> -->
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.requestedamount") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.servicefee") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.administrativefee") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.actualamount") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.Withdrawalstatus") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.ApplicationTime") }}
                  </th>
                </tr>
              </thead>
              <tbody v-if="tableData2.length">
                <tr
                  class="table-row bg-[#213743]"
                  v-for="(item, i) in tableData2"
                  :key="i"
                >
                  <!-- <td class="p-4 py-2 text-center w-[220px]">
                    {{ item.order_number }}
                  </td> -->
                  <td class="p-4 py-2 text-center">{{ item.fiat_amount }}</td>
                  <td class="p-4 py-2 text-center">{{ item.fiat_bank_fee }}</td>
                  <td class="p-4 py-2 text-center">
                    {{ item.fiat_admin_fee }}
                  </td>
                  <td class="p-4 py-2 text-center">
                    {{ item.fiat_paid_amount }}
                  </td>
                  <td class="p-4 py-2 text-center">{{ item.status_text }}</td>
                  <td
                    class="p-4 py-2 text-center overflow-ellipsis whitespace-nowrap"
                  >
                    {{ item.created_at }}
                  </td>
                </tr>
              </tbody>
              <div v-else class="m-auto my-4 w-[65vw]">
                <el-empty
                  class=""
                  :image-size="200"
                  :description="$t('layer.activity.noData')"
                />
              </div>
            </table>

            <!-- <div
              class="bg-[#2f4553] text-[#a4adb3] p-4 cursor-pointer hover:text-white mt-4 m-auto w-[140px] text-center rounded"
            >
              下载全部提款
            </div> -->
          </div>
          <!-- 活动记录 -->
          <div v-if="activeTab === 'tab3'" class="relative content">
            <table class="w-full h-auto" style="table-layout: fixed">
              <thead class="table-header text-[#90bacc]">
                <tr>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.activities") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.bonus") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.bettingrequirements") }}
                  </th>
                  <!-- <th class="p-4 text-center">
                    {{ $t("page.table.mybettingamount") }}
                  </th> -->
                  <!-- <th class="p-4 text-center">
                    {{ $t("page.table.auditresult") }}
                  </th> -->
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.issuancetime") }}
                  </th>
                </tr>
              </thead>
              <tbody v-if="tableData3.length">
                <tr
                  class="table-row bg-[#213743]"
                  v-for="(item, i) in tableData3"
                  :key="i"
                >
                  <!-- <td class="p-4 py-2 text-center">{{ item.active_title }}</td> -->
                  <td class="p-4 py-2 text-center">
                    {{ $t(item.active_key) }}
                  </td>
                  <td class="p-4 py-2 text-center">{{ item.coupon_amount }}</td>
                  <td class="p-4 py-2 text-center">
                    {{ item.coupon_bet_amount }}
                  </td>
                  <!-- <td class="p-4 py-2 text-center">{{ item.coupon_bet_amount }}</td> -->
                  <!-- <td class="p-4 py-2 text-center">{{ item.status_text }}</td> -->
                  <td
                    class="p-4 py-2 text-center overflow-ellipsis whitespace-nowrap"
                  >
                    {{ item.created_at }}
                  </td>
                </tr>
              </tbody>
              <div v-else class="m-auto my-4 w-[65vw]">
                <el-empty
                  class=""
                  :image-size="200"
                  :description="$t('layer.activity.noData')"
                />
              </div>
            </table>
          </div>
          <!-- 交易流水 -->
          <div v-if="activeTab === 'tab4'" class="relative content">
            <table class="w-full h-auto" style="table-layout: fixed">
              <thead class="table-header text-[#90bacc]">
                <tr>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.transaction") }}
                    <!-- 交易类型 -->
                  </th>
                  <!-- 交易前余额 -->
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.balance_before") }}
                  </th>
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.transactionAmount") }}
                    <!-- 交易金额 -->
                  </th>
                  <!-- 后余额 -->
                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.balances") }}
                  </th>

                  <th class="p-4 py-2 text-center">
                    {{ $t("page.table.trading") }}
                    <!-- 交易时间 -->
                  </th>
                </tr>
              </thead>
              <tbody v-if="tableData4.length">
                <tr
                  class="table-row bg-[#213743]"
                  v-for="(item, i) in tableData4"
                  :key="i"
                >
                  <td class="p-4 py-2 text-center">
                    {{ t("layer.code." + item.stype) }}
                  </td>
                  <td class="p-4 py-2 text-center">
                    {{ item.balance_before }}
                  </td>
                  <td class="p-4 py-2 text-center">
                    {{ item.amount + item.coupon_amount }}
                  </td>
                  <td class="p-4 py-2 text-center">{{ item.balance }}</td>
                  <td
                    class="p-4 py-2 text-center overflow-ellipsis whitespace-nowrap"
                  >
                    {{
                      dateTimeZone(
                        item.created_at,
                        "{y}-{m}-{d} {h}:{i}:{s}",
                        main.timeZone
                      )
                    }}
                  </td>
                </tr>
              </tbody>
              <div v-else class="m-auto my-4 w-[65vw]">
                <el-empty
                  class=""
                  :image-size="200"
                  :description="$t('layer.activity.noData')"
                />
              </div>
            </table>
          </div>
          <div
            v-if="activeTab === 'tab1'"
            class="max-w-[200px] w-full m-auto mt-2"
          >
            <van-pagination
              :prev-text="$t('page.table.prev')"
              :next-text="$t('page.table.next')"
              v-model="currentPage1"
              :page-count="totalList1"
              mode="simple"
            />
          </div>
          <div
            v-if="activeTab === 'tab2'"
            class="max-w-[200px] w-full m-auto mt-2"
          >
            <van-pagination
              :prev-text="$t('page.table.prev')"
              :next-text="$t('page.table.next')"
              v-model="currentPage2"
              :page-count="totalList2"
              mode="simple"
            />
          </div>
          <div
            v-if="activeTab === 'tab3'"
            class="max-w-[200px] w-full m-auto mt-2"
          >
            <van-pagination
              :prev-text="$t('page.table.prev')"
              :next-text="$t('page.table.next')"
              v-model="currentPage3"
              :page-count="totalList3"
              mode="simple"
            />
          </div>
          <div
            v-if="activeTab === 'tab4'"
            class="max-w-[200px] w-full m-auto mt-2"
          >
            <van-pagination
              :prev-text="$t('page.table.prev')"
              :next-text="$t('page.table.next')"
              v-model="currentPage4"
              :page-count="totalList4"
              mode="simple"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  onActivated,
  watch
} from "vue";
import { dateTimeZone } from "../../utils/date";
import { useRouter } from "vue-router";
import {
  depositListOffline,
  depositListOnline,
  withdrawList,
  activeList,
  transactionList
} from "../../api/history";
import { mainAct } from "@/store/activeda";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const scrollTable = ref(null);
const main = mainAct();
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const router = useRouter();
const activeTab = ref("tab1");

const tabData = [
  {
    title: "page.table.Rechargehistory",
    key: "tab1"
  },
  {
    title: "page.table.Withdrawalhistory",
    key: "tab2"
  },
  {
    title: "page.table.Activitylogs",
    key: "tab3"
  },
  {
    title: "page.table.TransactionFlow",
    key: "tab4"
  }
];

const clickTab = val => {
  switch (val) {
    case "tab1":
      getList1();
      break;
    case "tab2":
      getList2();
      break;
    case "tab3":
      getList3();
      break;
    case "tab4":
      getList4();
      break;
  }
  activeTab.value = val;
};

//分页
const currentPage1 = ref(1);
const totalList1 = ref(3);
const currentPage2 = ref(1);
const totalList2 = ref(3);
const currentPage3 = ref(1);
const currentPage4 = ref(1);
const totalList3 = ref(3);
const totalList4 = ref(3);
const tableData1 = ref([]);
const tableData2 = ref([]);
const tableData3 = ref([]);
const tableData4 = ref([]);
const backPage = () => {
  router.go(-1);
};
const getList1 = async () => {
  getTop();
  let data = {
    page: currentPage1.value,
    page_size: 10
  };
  let res = await depositListOnline(data);
  if (res.errno == 0) {
    res.data.list.forEach(item => {
      item.created_at = dateTimeZone(
        item.created_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      switch (item.pay_status) {
        case 0:
          item.pay_text = globalProperties.$t("page.table.paytext1");
          break;
        case 1:
          item.pay_text = globalProperties.$t("page.table.paytext2");
          break;
        case 2:
          item.pay_text = globalProperties.$t("page.table.paytext3");
          break;
        case 3:
          item.pay_text = globalProperties.$t("page.table.paytext4");
          break;
        case 4:
          item.pay_text = globalProperties.$t("page.table.paytext5");
          break;
        case 5:
          item.pay_text = globalProperties.$t("page.table.paytext6");
          break;
        default:
          break;
      }
    });
    totalList1.value = Math.ceil(res.data.total / 10);
    tableData1.value = res.data.list;
  }
};
// const getList2 = async() =>{
//   let data = {
//     page:currentPage1.value
//   }
//  let res = await depositListOffline(data)
//  console.log("⬇⬇   ---> 线下充值列表 <---   ⬇⬇");
//  console.log(res);
// }
const getList2 = async () => {
  getTop();
  let data = {
    page: currentPage2.value,
    page_size: 10
  };
  let res = await withdrawList(data);
  console.log("⬇⬇   ---> 提现列表 <---   ⬇⬇");
  if (res.errno == 0) {
    res.data.list.forEach(item => {
      // pay_status
      // status  ！= 2 显示
      // status == 0 待处理
      // status == 3 拒绝提现
      // status == 1|| 2  去判断 pay_status
      item.created_at = dateTimeZone(
        item.created_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      switch (item.status) {
        case 0:
          item.status_text = globalProperties.$t("page.table.withdrawtext1");
          break;
        case 1:
          item.status_text = getText(item.pay_status);
          break;
        case 2:
          item.status_text = getText(item.pay_status);
          break;
        case 3:
          item.status_text = globalProperties.$t("page.table.withdrawtext4");
          break;

        default:
          break;
      }
    });
    totalList2.value = Math.ceil(res.data.total / 10);
    tableData2.value = res.data.list;
  }
};

const getList3 = async () => {
  getTop();
  let data = {
    page: currentPage3.value,
    page_size: 10
  };
  let res = await activeList(data);
  console.log("⬇⬇   ---> 活动列表 <---   ⬇⬇");
  if (res.errno == 0) {
    res.data.list.forEach(item => {
      item.created_at = dateTimeZone(
        item.created_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      switch (item.status) {
        case 1:
          item.status_text = globalProperties.$t("page.table.statustext1");
          break;
        case 2:
          item.status_text = globalProperties.$t("page.table.statustext2");
          break;
        case 3:
          item.status_text = globalProperties.$t("page.table.statustext3");
          break;

        default:
          break;
      }
    });
    totalList3.value = Math.ceil(res.data.total / 10);
    tableData3.value = res.data.list;
  }
};

// 交易流水
const getList4 = () => {
  getTop();

  let data = {
    page: currentPage4.value,
    page_size: 10
  };

  transactionList(data).then(res => {
    console.log("⬇⬇   ---> 交易流水 <---   ⬇⬇");
    if (res.errno == 0) {
      totalList4.value = Math.ceil(res.data.total / 10);
      tableData4.value = res.data.list;
    }
  });
};

const getTop = () => {
  if (main.scrollable) {
    main.scrollable.scrollTop = 0;
  }
};

const getText = key => {
  let str = "";
  switch (key) {
    case 0:
      str = globalProperties.$t("page.table.withdrawtext1");
      break;
    case 1:
      str = globalProperties.$t("page.table.paytext2");
      break;
    case 2:
      str = globalProperties.$t("page.table.paytext3");
      break;
    case 3:
      str = globalProperties.$t("page.table.paytext4");
      break;
    case 4:
      str = globalProperties.$t("page.table.paytext5");
      break;
  }
  return str;
};

onActivated(() => {
  if (main.isLogin) {
    getList1();
    getList2();
    getList3();
    getList4();
  }
});
watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      //执行onmounted请求
      getList1();
      getList2();
      getList3();
      getList4();
    }
  }
);

watch(
  currentPage1,
  () => {
    getList1();
  },
  {
    immediate: true
  }
);

watch(
  currentPage2,
  () => {
    getList2();
  },
  {
    immediate: true
  }
);

watch(
  currentPage3,
  () => {
    getList3();
  },
  {
    immediate: true
  }
);

watch(
  currentPage4,
  () => {
    getList4();
  },
  {
    immediate: true
  }
);
</script>
<style scoped lang="less">
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }
  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;
    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;

    .btn {
      width: 220px;
      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }
  .responsive-layout .content {
    // flex-grow: 1;
  }
  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}

// 手机模式
@media (max-width: 600px) {
  .responsive-layout .sidebar {
    overflow-y: auto;
  }
}

.content {
  overflow: auto;
  table {
    min-width: 900px;
  }
}
.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;

  .btn {
    width: 220px;
    height: 52px;
    border-radius: 52px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}

.active-tab {
  background-color: #2f4553;
}
.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}
.ipt-dark:hover {
  border-color: #557086;
}
.close-icon:hover {
  color: white;
}
.close-icon {
  font-size: 18px;
  color: #b1bad3;
}
:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #0f212e;
  padding: 0;
  .btn {
    border: unset;
    outline: unset;
  }
}
:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}
td {
  height: 20px !important;
  line-height: 20px !important;
}
.table-row:nth-child(even) {
  background-color: #0f212e !important;
}
</style>
